<template>
  <div class="show-movies">
    <el-link
        @click="movieLeft"
        :disabled="disabledMoveLeft"
        :underline="false"
        class="left-jiantou">
      <el-image :src="left"/>
    </el-link>
    <poster-template
        :active-id="activeId"
        @toChooseMovie="toChooseMovie(index,item.movieId)"
        ref="poster"
        :id="index"
        class="poster"
        :poster="item.poster"
        v-for="(item,index) in pageData"/>
    <el-link
        @click="movieRight"
        :disabled="disabledMoveRight"
        :underline="false"
        class="right-jiantou">
      <el-image :src="right"/>
    </el-link>
  </div>
</template>

<script>
import PosterTemplate from "@/views/cinema/cinema_info/cinema_show_movie/template/PosterTemplate";

export default {
  name: "CinemaShowMovies",
  components: {
    PosterTemplate
  },
  data() {
    return {
      //活跃的电影id
      activeId: 0,
      //当前页
      pageNum: 1,
      //每页数
      size: 7,
      //当前页数据
      pageData: [],
      //总页数
      totalPages: 0,
      //箭头图表
      left: require('@/assets/image/cinema/zuojiantou.png'),
      right: require('@/assets/image/cinema/youjiantou.png'),
    }
  },
  props: {
    posters: {
      type: Array,
      default() {
        return []
      }
    },
  },
  computed: {
    // 是否禁止左移动
    disabledMoveLeft() {
      return this.pageNum === 1
    },
    //是否禁止右移动
    disabledMoveRight() {
      return this.pageNum === this.totalPages
    }
  },
  created() {
    //1.获取总页数
    this.getTotalPages()
    //2.获取当前页数据
    this.getPageData()
  },
  mounted() {
    //第一次访问自动选择第一个电影
    this.toChooseMovie(0, this.posters[0].movieId)
  },
  methods: {
    //选择当前电影
    toChooseMovie(index, id) {
      this.activeId = index
      this.$emit('chooseMovie', id)
    },
    //获取总页数
    getTotalPages() {
      //获取总数量
      let total = this.posters.length
      //获取每页条数
      let size = this.size
      this.totalPages = total % size === 0 ? Math.floor(total / size) : Math.floor(total / size) + 1
    },
    //获取当前页数据
    getPageData() {
      //1.初始化当前页数据 初始化活跃id
      this.pageData = []
      this.activeId = 0
      //1.获取总数据
      let posters = this.posters
      //2.获取当前页
      let pageNum = this.pageNum
      //3.获取每页条数
      let size = this.size
      //4.获取当前页数据开始索引
      let begin = (pageNum - 1) * size
      //5.获取每页结束索引
      let end = pageNum * size
      //6.判断end是否超过总数据
      if (end > posters.length) {
        end = posters.length
      }
      //7.获取当前页数据
      for (let i = begin; i < end; i++) {
        this.pageData.push(posters[i])
      }
    },
    //向左移动
    movieLeft() {
      this.pageNum = this.pageNum - 1
      this.getPageData()
      this.toChooseMovie(0, this.pageData[0].movieId)
    },
    //向右移动
    movieRight() {
      this.pageNum = this.pageNum + 1
      this.getPageData()
      this.toChooseMovie(0, this.pageData[0].movieId)
    },
  },
}
</script>

<style scoped>
.show-movies {
  width: 100%;
  background-color: #EFEFEF;
  margin-bottom: 30px;
  margin-top: 30px;
  padding-left: 22px;
  padding-top: 20px;
  padding-bottom: 20px;
  position: relative;
}

.left-jiantou {
  height: 50px;
  width: 50px;
  position: absolute;
  z-index: 102;
  top: 110px;
  left: 3px;
}

.right-jiantou {
  height: 50px;
  width: 50px;
  position: absolute;
  z-index: 102;
  top: 110px;
  right: 3px;
}

.poster {
  margin-right: 10px;
}
</style>